<template>
	<view class="topic">
		<view class="title">
			<view class="badge">{{ queType }}</view>
			<text>{{ index }}、{{ topic.queTitle }}</text>
		</view>
		<view class="options">
			<view @click="choseOption(index)" :class="opClassList(index)" v-for="(option, index) in options" :key="option + index">
				<view class="icon flex--c--c">
					<view class="flex--c--c">
						<text class="optionsNum" v-if="!isFinished || isNormalOption(index) || !isCorrecting || isRecitation">{{ toChar(index) }}</text>
						<image v-else-if="isRightAnswer(index)" src="../static/online/true.png"></image>
						<image v-else src="../static/online/false.png"></image>
					</view>
				</view>
				<text>{{option.optionContent}}</text>
			</view>
		</view>
		<template v-if="isCorrecting||isRecitation">
			<button class="view-analysis" v-show="!isSingleTopic&&!isFinished" @click="manualViewAnalysis = isFinished = true" type="default" :disabled="userChoice.length === 0">
				查看解析
			</button>
			<template>
				<view class="answer">
					<view class="answer__right">
						正确答案：
						<text>{{topic.rightAnswer}}</text>
					</view>
				</view>
				<view class="analysis">
					<view class="header">
						<text>题目解析</text>
						<button type="default" @click="correctTopicHandler(topic.queId)" class="wrongBtn">纠错</button>
					</view>
					<view class="content">{{topic.queAnalysis||'该题暂无解析'}}</view>
				</view>
				<view class="analysis">
					<view class="header">
						<text>错题分析</text>
						<view class="headerNum">答错人数：<text class="org">{{topic.wrongUsers}}</text><text>/{{topic.allUsers}}</text></view>
					</view>
					<view class="content">
						<view class="ana_li" v-for="(item,index) in options" :key="item+index">
							<view class="ana_li_txt">
								<view>{{item.optionStr}}选项</view>
								<text>学生选择率</text>
							</view>
							<tui-circular-progress :fontSize="17" :progressColor="lineColor[index].start" :fontColor="lineColor[index].end" :gradualColor="lineColor[index].end" :percentage="parseInt(item.pickRank)" :defaultColor="lineColor[index].bg"></tui-circular-progress>
						</view>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
import tuiPro from './tui-circular-progress/tui-circular-progress'
export default {
	components: {
	  "tui-circular-progress": tuiPro,
	},
	props: {
		topic: {
			type: Object,
			required: true
		},
		index: {
			type: Number,
			required: true
		},
		topicIndex: Number,
		autoJump: {
			type: Boolean,
			default: false
		},
		correctTopic: {
			type: Boolean,
			default: true
		},
		isCorrecting: Boolean,
		isRecitation: Boolean,
		jumping: Boolean,
	},
	data() {
		return {
			userChoice: [],
			manualViewAnalysis: false,
			isFinished: false,
			lineColor:[//渐变色
				{start:'#8CB6FE',end:"#4275F8",bg:"#dae4fe"},
				{start:'#FFBE9A',end:"#FF6022",bg:"#ffe8de"},
				{start:'#FFD46C',end:"#F99D2E",bg:"#feebd5"},
				{start:'#c3b8ff',end:"#9a77ff",bg:"#ece5ff"},
				{start:'#8CB6FE',end:"#4275F8",bg:"#dae4fe"}
			]
		};
	},
	watch: {
		topic: {
			immediate: true,
			deep: true,
			handler(n, o) {
				//背题模式
				if (this.isRecitation) {
					this.isFinished = true;
					this.userChoice = [];
					return;
				}
				//正常做题
				this.userChoice = n.userChoice ? n.userChoice.split('') : [];
				if (this.isCorrecting) this.isFinished = this.manualViewAnalysis = n.isCorrect !== null || false;
			}
		},
		isFinished(n, o) {
			// 答对自动跳转下一题
			n && this.$emit('finished', this.topicIndex);
			if (this.autoJump && n && this.topic.isCorrect && !this.topic.isSlipped && this.isSingleTopic) {
				// console.log(this.topic);
				this.$emit('update:jumping', true);
				let timer = setTimeout(() => {
					clearTimeout(timer);
					this.$emit('next');
					this.$emit('update:jumping', false);
				}, 1500);
			}
		}
	},
	computed: {
		queType() {
			switch (this.topic.qusTypeId) {
				case 1:
					return '单选';
				case 2:
					return '多选';
				case 3:
					return '判断';
			}
		},
		options() {
			const { topic } = this;
			return topic.options
		},
		isSingleTopic() {
			return /1|3/.test(this.topic.qusTypeId);
		},
		isShowAnalysis() {
			if (this.isFinished || this.isRecitation) return true;
			return false;
		},
		formatUserChoice() {
			return this.$u
				.deepClone(this.userChoice)
				.sort()
				.join('');
		}
	},
	methods: {
		correctTopicHandler(id){
			//纠错跳转
      	this.$emit('gotolink', id);
		},
		choseOption(index) {
			if (this.isFinished) {
				//当前题目已经批改完，不能再次答题
				return;
			}
			const option = this.toChar(index);
			const opIndex = this.userChoice.indexOf(option);
			//单选/判断
			if (this.isSingleTopic) {
				this.$set(this.userChoice, 0, option);
			} else if (opIndex === -1) {
				//多选选中
				this.userChoice.push(option);
			} else this.userChoice.splice(opIndex, 1); //多选取消
			this.$emit('update:oldUserChoice', this.topic.userChoice);
			this.$emit('update:userChoice', this.formatUserChoice);
			this.$nextTick(function() {
				if (this.isCorrecting) this.isFinished = this.isSingleTopic;
			});
		},
		opClassList(index) {
			const classList = ['option'];
			const option = this.toChar(index);
			//checked条件：题目未完成&&不批改题目&&不是背题模式&&
			if ((!this.isFinished || !this.isCorrecting) && !this.isRecitation) {
				this.userChoice.includes(option) && classList.push('checked');
			}
			if (this.isCorrecting && this.isFinished && !this.isNormalOption(index)) {
				classList.push(this.isRightAnswer(index) ? 'right' : 'wrong');
			}
			return classList;
		},
		toChar(num) {
			return String.fromCharCode(65 + num);
		},
		isRightAnswer(index) {
			const option = this.toChar(index);
			const { rightAnswer } = this.topic;
			//正确答案
			if (rightAnswer.includes(option)) return true;
			//用户选择错误答案
			if (this.isUserChecked(index)) return false;
		},
		isUserChecked(index) {
			const option = this.toChar(index);
			return this.formatUserChoice.includes(option);
		},
		isNormalOption(index) {
			//用户未选择并且不是正确答案的选项
			const option = this.toChar(index);
			return !this.isUserChecked(index) && !this.isRightAnswer(index);
		}
	}
};
</script>

<style scoped lang="scss">
//option style
$wrongColor: #f45c4b;
$wrongShadowColor: #d44f40;
$rightColor: #5fba4a;
$rightShadowColor: #58ac45;
$checkedColor: #3f7bf2;
$checkedShadowColor: #264d9a;
@mixin optin-style($background, $color) {
	.icon > view {
		color: white;
		background: $background;
		box-shadow: 0 0 8upx 2upx rgba($color: $color, $alpha: 0.25);
	}
	.icon + text {
		color: $background;
	}
	.optionsNum{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
}
.badge {
	height: 30upx;
	line-height: 30upx;
	margin: 0;
	margin-top: 8upx;
	width: 60upx;
	background: #3f7bf2;
	border-radius: 7upx 7upx 7upx 0upx;
	font-size: 20upx;
	white-space: nowrap;
	font-weight: 400;
	color: #ffffff;
	box-sizing: content-box;
	text-align: center;
}
.title {
	display: flex;
	align-items: flex-start;
	margin-bottom: 53upx;
	text {
		flex: 1;
		margin-left: 20upx;
		line-height: 1.5;
		font-size: 32upx;
		font-weight: 400;
		color: #363940;
	}
}
.option {
	display: flex;
	// line-height: 60upx;
	margin-bottom: 40upx;
	.icon {
		width: 60upx;
		height: 60upx;
		view {
			width: 46upx;
			height: 46upx;
			background: #ffffff;
			border-radius: 50%;
			color: #363940;
			box-shadow: 0 0 8upx 2upx rgba(0, 0, 0, 0.06);
			image {
				width: 22upx;
				height: 22upx;
			}
		}
	}
	> text {
		flex: 1;
		line-height: 1.3;
		display: flex;
		align-items: center;
		margin-left: 20upx;
		font-size: 32upx;
		font-weight: 400;
		color: #363940;
	}
}

.wrong {
	@include optin-style($wrongColor, $wrongShadowColor);
}
.right {
	@include optin-style($rightColor, $rightShadowColor);
}
.checked {
	@include optin-style($checkedColor, $checkedShadowColor);
}
[class^='icon-'] {
	width: 22upx;
	height: 22upx;
}
.answer {
	background: #f2f5fa;
	border-radius: 6px;
	line-height: 80upx;
	display: flex;
	align-items: center;
	padding: 0 28upx;
	view {
		font-size: 32upx;
		font-weight: 500;
		color: #363940;
		flex: 1;
		text {
			letter-spacing: 2upx;
		}
	}
	.answer__right text {
		color: $rightColor;
	}
	.answer__user text {
		color: $wrongColor;
	}
}
.answer + .analysis {
	margin-top: 50upx;
}
.analysis {
	padding-bottom: 50upx;
	.header text,
	.content {
		padding-left: 26upx;
		color: #787d89;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		// max-height: 100upx;
	}
	.header {
		display: flex;
		align-items: center;
		margin-bottom: 24upx;
		.wrongBtn{
		  margin-top: 1px;
			border: 1upx solid #a8aaad;
		}
		.headerNum{
			color: #787D89;
			display: flex;
			justify-content: start;
			font-size: 28upx;
			font-weight: 400;
			.org{
				color:#F45C4B!important;
			}
			text{
				color: #363940;
				margin-left: 0;
				padding-left: 0;
				line-height: 41upx;
				font-weight: 400;
			}
			text::before{
				display: none;
			}
		}
		text {
			flex: 1;
			font-size: 32upx;
			font-weight: 500;
			color: #363940;
			position: relative;
		}
		button {
			height: 44upx;
			line-height: 44upx;
			border: 1px solid #a8aaad;
			padding: 0 36upx;
			border-radius: 22upx;
			font-size: 26upx;
			color: #a8aaad;
			background: none;
		}
		button:after {
			border: none;
		}
		text:before {
			content: '';
			width: 8upx;
			height: 26upx;
			background:linear-gradient(to bottom, #fc7767 0%, #ec412f 100%);
			border-radius: 4upx;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.content {
		line-height: 1.4;
	}
}
.view-analysis {
	width: 100%;
	line-height: 80upx;
	background: #5fba4a;
	border-radius: 40upx;
	color: white;
}
.ana_li{
	display: flex;
	justify-content: space-between;
	width: 317upx;
	height: 150upx;
	margin-bottom: 30upx;
	background: #ffffff;
	border-radius: 18upx;
	box-shadow: 0upx 4upx 16upx 0upx rgba(0,0,0,0.1);
	padding: 19upx;
	.ana_li_txt{
		line-height: 45upx;
		view{
			color: #363940;
			font-size: 32upx;
			margin-top: 10upx;
			font-weight: 500;
		}
		text{
			color: #6B7180;
			font-size: 26upx;
		}
	}
}
</style>
